<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="itcast" uri="http://itcast.cn/common/"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动物管理</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
<meta name="keywords" content="Modern Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
 <!-- Bootstrap Core CSS -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.css">
<!-- Custom CSS -->
<link href="${pageContext.request.contextPath }/css/style1.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"> 
<!-- jQuery -->
<script src="${pageContext.request.contextPath }/js/jquery-1.11.0.js"></script>
<!--kindeditor的js  -->
<script charset="utf-8" src="${pageContext.request.contextPath }/js/kindeditor/kindeditor-all-min.js" type="text/javascript"></script>
<script charset="utf-8" src="${pageContext.request.contextPath }/js/kindeditor/lang/zh-CN.js" type="text/javascript"></script>

<script src="${pageContext.request.contextPath }/js/jquery-form.js"></script>
<!---//webfonts--->  
<!-- Bootstrap Core JavaScript -->
<script src="${pageContext.request.contextPath }/js/bootstrap.js"></script>

<script type="text/javascript">  
			var editor;
			KindEditor.ready(function(K) {
			  editor = K.create('textarea[name="petlll"]', {
				  items: ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
		                'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
		                'insertunorderedlist', '|', 'emoticons', 'image', 'link','|','code','|','preview'],
				  	afterBlur:function(){this.sync();},
			        resizeType: 1,
			        <%-- uploadJson : '+<%=basePath%>+'AdminNews/uploadvvv',// 上传图片接口  项目名（此处项目名是wenjiqiwu）+上传图片的路径
	                filePostName: 'imgFile',// name属性默认值  --%>
			        allowPreviewEmoticons: false
			    });
			    
			});
</script>
<script type="text/javascript">  
			var editorr;
			KindEditor.ready(function(K) {
			  editorr = K.create('textarea[name="petcontent"]', {
				  items: ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
		                'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
		                'insertunorderedlist', '|', 'emoticons', 'image', 'link','|','code','|','preview'],
				  	afterBlur:function(){this.sync();},
			        resizeType: 1,
			        <%-- uploadJson : '+<%=basePath%>+'AdminNews/uploadvvv',// 上传图片接口  项目名（此处项目名是wenjiqiwu）+上传图片的路径
	                filePostName: 'imgFile',// name属性默认值  --%>
			        allowPreviewEmoticons: false
			    });
			    
			});
</script>

    <script type="text/javascript">
    	 /*全选或全不选*/
			//1.页面加载
			$(function(){
				//2.获取下面的复选框并将其选中状态设置跟编码的前端复选框保持一致
				$("#select").click(function(){
					 //atrr方法与JQ的版本有关，在1.8.3以下有关
					//$("tbody input[class='selectOne']").attr("checked",this.checked);
					$("tbody input[class='selectOne']").prop("checked",this.checked);
					
				});
			});
			
			/*全选删除*/
			function del(){
				var pList = "";
				
	            $("[name='all']").each(function () {
	                if ($(this).is(':checked')) {
	                    pList += $(this).val() + ",";
	                }
	            });
	            //去除最后的，
	           pList=pList.substr(0,pList.length-1);
	           var ids = pList;
	           if(pList==""){
	           	alert("请选择");
	           }else{
	        	   var y = confirm("您确定要删除所选项吗？");
	        	   if(y){
	        		   $.post(
	   	           			"<%=basePath%>adminPet/deletePetss.html",
	   	           			{"ids":ids},
	   	           			function (data) {
	   							alert("删除成功!");
	   							location.href="<%=basePath%>admin/pet.html";
	   						});
	        	   }
	           	
	           }

			}
			
			
			/*图片上传*/
			function imgfun(){
				
				var obj = {
						url:"<%=basePath%>admin/uploadPic.html",
						dataType:"json",
						type:"post",
						success: function (result) {
							var objs;
							/* if((typeof result == 'object') && result.constructor == Object){
								objs = result;
							}else{
								objs = eval("("+result+")");
							} */
							$("#pimage1").attr("width","220px");
							$("#pimage1").attr("height","260px");
							$("#pimage1").attr("src",result);
							$("#picc").val(result);
							$("#pimage1").removeClass("hidden");
						}
				};			
				$("#fom").ajaxSubmit(obj);

        	}
		
			
			/* 添加宠物 */
			function addPet() {
				 $("#pdesc1").val($("#pet_list").val());//将描述框的数据同步到textarea中
				$.post(
				     "<%=basePath%>admin/Addpet.html",
				     $("#fom").serialize(),
				     function (data) {
						alert("添加成功!");
						location.href="<%=basePath%>admin/pet.html";
					}
				);
			}
			
			
		</script>

</head>
<body>
<div id="wrapper">
     <!-- Navigation -->
        <jsp:include page="/WEB-INF/jsp/admin/common.jsp"></jsp:include>
        
        <div id="page-wrapper">
           <div class="row" style="background-color: wheat;">
           <div class=""></div>
              <div class="col-lg-8 navbar-left" style="padding-top: 15px;margin-left:10px;">
               <form class="form-inline" id="" action="${pageContext.request.contextPath }/admin/petlist.html" method="post">
               	      <div class="form-group">
					    <label for="numm">编号:</label>
					    <input type="text" class="form-control" id="numm" name="numm" value="${num }" placeholder="动物编号...">
					  </div>
					 
					  <div class="form-group">
					    <label for="agee">年龄：</label>
					    <input type="text" class="form-control" id="agee" name="agee" value="${age }" placeholder="年龄...">
					  </div>
					  
					   <div class="form-group">
					    <label for="sexx">性别:</label>
					    <select id="sexx" name="sexx">
									<option value="">--请选择--</option>
									<option value="1" <c:if test="${sexg == 1}"> selected</c:if>>男</option>
									<option value="2" <c:if test="${sexg == 2}"> selected</c:if>>女</option>
								</select>
					  </div>
					   <div class="form-group">
					    <label for="sts">状态:</label>
					    <select id="sts" name="sts">
									<option value="">--请选择--</option>
									<option value="1" <c:if test="${item == 1}"> selected</c:if>>上架</option>
									<option value="2" <c:if test="${item == 2}"> selected</c:if>>下架</option>
								</select>
					  </div>
						  
					  <button type="submit" class="btn btn-default">搜索</button>
					</form>
              </div>
              
           
              <div class="col-md-2 navbar-right" style="padding-top: 15px;">
						
									<!--<span class="glyphicon glyphicon-edit"></span>-->
									<button class="btn btn-info btn-sm glyphicon glyphicon-plus" data-toggle="modal" data-target="#myModal2">
											添加
											</button>
								
					</div>
           </div>
        <div class="row">
        <div class="col-md-12">  
  	       <h3>宠物管理</h3>
  	        <div class="bs-example4" data-example-id="contextual-table">
              <table class="table table-hover">
	             <caption><input type="checkbox" id="select">
	             	<!--全选/全不选-->
	             	<a href="#" class="btn btn-danger btn-sm" onclick="del()">
									<span class="glyphicon glyphicon-trash"></span> 删除
								</a>
	             </input>
	             </caption>
	             
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>图片</th>
							<th>品种</th>
							<th>性别</th>
							<th>年龄</th>
							<th>重量</th>
							<th>动物编号</th>
							<th>状态</th>
							<th>操作</th>
							
						</tr>
					</thead>
					
						<tbody>
						<c:forEach var="row" items="${page.rows }" varStatus="vs">
							<tr>
								<td><input type="checkbox" class="selectOne" value="${row.id}" name="all"/><span id="" style="padding-left: 5px;">${vs.count}</span></td>
								<td>${row.pname}</td>
								<td>
									<img src="${row.pimage }" class="img-thumbnail" alt="Cinque Terre" width="30px" height="30px"> 
								</td>
								
								
								<c:if test="${row.pkind == 1}">
								<td>狗狗</td>
								</c:if>
								
								<c:if test="${row.pkind == 2}">
								<td>猫猫</td>
								</c:if>
								
								<c:if test="${row.pkind == 3}">
								<td>其他</td>
								</c:if>
								<td>${row.psex==1?"男":"女" }</td>
								<td>${row.page }</td>
								<td>${row.pweight}</td>
								<td>${row.id}</td>
								<td>${row.pstatus == 1?"上架":"下架"}</td>
								<td>
								<!--编辑-->
								<a href="#" onclick="seslectPet(${row.id})">
									
									<button class="btn btn-info btn-sm glyphicon glyphicon-edit" data-toggle="modal" data-target="#myModal">
											编辑
											</button>
								</a>
								&nbsp;&nbsp;
								<!--删除-->							
								<a href="#" class="btn btn-danger btn-sm" onclick="deletePet(${row.id})">
									<span class="glyphicon glyphicon-trash"></span> 删除
								</a>
								
							</td>	
							</tr>
							
						</c:forEach>

						</tbody>
				</table>
				<div class="col-md-12 text-right">
							<span>共<font style="color: red;">${total}</font>条数据</span><itcast:page url="${pageContext.request.contextPath }/admin/petlist.html" />
						</div>
             </div>
            </div>
            </div>
            
            
      </div>
      <!-- /#page-wrapper -->
   </div>
   
   <!--添加表单-->
   <div class="update_modal">
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal2Label" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content" style="background-color:#A6A6A6;">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
				</button>
						<h4 class="modal-title" id="myModal2Label">
					         添加
				        </h4>
					<!--添加表单-->
					<form class="form-horizontal" role="form" method="post" id="fom" enctype="multipart/form-data">
	
						<div class="form-group">
							<label for="pname1" class="col-sm-2 control-label">姓名</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" id="pname1" name="pname">
							</div>
						</div>
						
						<div class="form-group">
							<label for="pimage1" class="col-sm-2 control-label">图片</label>
							<div class="col-sm-4">
								<img id="pimage1" name="pimage1" src="${pageContext.request.contextPath }/img/i.png" width="50px" height="50px" class="hidden"/>
								<input type="hidden" name="pimage" id="picc" value="">
								<input type="file" name="imgs" id="imgs" onchange="imgfun()">
							</div>
						</div>
						
						
						<!-- <div class="form-group">
							<label for="pkind1" class="col-sm-2 control-label">品种</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" id="pkind1" name="pkind">
							</div>
						</div> -->
						
						<div class="form-group">
							<label for="pkind1" class="col-sm-2 control-label">品种</label>
							<div class="col-sm-4">
								<!--<input type="text" class="form-control" id="petsex" name="petsex">-->
								<select id="pkind1" name="pkind">
									<option value="1">狗狗</option>
									<option value="2">猫猫</option>
									<option value="3">其他</option>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label for="psex1" class="col-sm-2 control-label">性别</label>
							<div class="col-sm-4">
								<!--<input type="text" class="form-control" id="petsex" name="petsex">-->
								<select id="psex1" name="psex">
									<option value="">--请选择--</option>
									<option value="1">男</option>
									<option value="2">女</option>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label for="page1" class="col-sm-2 control-label">年龄</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" id="page1" name="page">
							</div>
						</div>
						
						<div class="form-group">
							<label for="pweight1" class="col-sm-2 control-label">重量</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" id="pweight1" name="pweight">
							</div>
						</div>
						
						<div class="form-group">
							<label for="pstatus1" class="col-sm-2 control-label">状态</label>
							<div class="col-sm-4">
								<select id="pstatus1" name="pstatus">
									<option value="">--状态--</option>
									<option value="1">上架</option>
									<option value="2">下架</option>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label for="pdesc1" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-8">
								<!--<input type="text" class="form-control" id="petdescr" name="petdescr">-->
								<!-- <textarea style="width: 450px; height: 220px;" id="pdesc1" name="pdesc"></textarea> -->
								 <textarea id="pet_list" name="petlll" style="width:100%;height:250px;border: 0 none;visibility:hidden;"></textarea>
            								<textarea rows="" cols="" name="pdesc" id="pdesc1" style="width:350px;height:250px;display:none;"></textarea>
							</div>
						</div>
					
					
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
						<button type="button" class="btn btn-primary" onclick="addPet()">
					确定
				</button>
				
				</form>
				
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
		</div>
		
		
		<div class="update_modal">
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content" style="background-color:#A6A6A6;">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
				</button>
				
				
				
						<h4 class="modal-title" id="myModalLabel">
					编辑
				</h4>
					
					<form class="form-horizontal" role="form" id="fomm" method="post" enctype="multipart/form-data">
					     
	                    <div class="form-group">
							
							<div class="col-sm-4">
								<input type="hidden" class="form-control" id="id" name="id">
							</div>
						</div>
						
						
						<div class="form-group">
							<label for="pname" class="col-sm-2 control-label">姓名</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" id="pname" name="pname">
							</div>
						</div>
						
						<div class="form-group">
							<label for="pimage" class="col-sm-2 control-label">图片</label>
							<div class="col-sm-4">
								<img id="pimage" src="${pageContext.request.contextPath }/img/1.png" width="50px" height="50px"/>
    							<input type="hidden" name="pimage" id="piccc" value="">
								<input type="file" name="imgss" id="imgss" onchange="imgfunn()">
							</div>
						</div>
						
						
						<div class="form-group">
							<label for="pkind1" class="col-sm-2 control-label">品种</label>
							<div class="col-sm-4">
								<!--<input type="text" class="form-control" id="petsex" name="petsex">-->
								<select id="pkind1" name="pkind">
									<option value="1">狗狗</option>
									<option value="2">猫猫</option>
									<option value="3">其他</option>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label for="psex" class="col-sm-2 control-label">性别</label>
							<div class="col-sm-4">
								
								<select id="psex" name="psex">
									<option value="">--请选择--</option>
									<option value="1">男</option>
									<option value="2">女</option>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label for="page" class="col-sm-2 control-label">年龄</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" id="page" name="page">
							</div>
						</div>
						
						<div class="form-group">
							<label for="pweight" class="col-sm-2 control-label">重量</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" id="pweight" name="pweight">
							</div>
						</div>
						<!--到时候在后台自动生成-->
						<div class="form-group">
							<label for="num1" class="col-sm-2 control-label">编号</label>
							<div class="col-sm-4">
								<!-- <input type="text" class="form-control" id="id1" name="id1"> -->
								<span id="num1" name="num1">12331</span>
							</div>
						</div>
						
						<div class="form-group">
							<label for="pstatus" class="col-sm-2 control-label">状态</label>
							<div class="col-sm-4">
								<!--<input type="text" class="form-control" id="petsex" name="petsex">-->
								<select id="pstatus" name="pstatus">
									<option value="">--请选择--</option>
									<option value="1">上架</option>
									<option value="2">下架</option>
								</select>
							</div>
						</div>
						
						
						<div class="form-group">
							<label for="pdesc" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-8">
								<!--<input type="text" class="form-control" id="petdescr" name="petdescr">-->
								<!-- <textarea style="width: 450px; height: 220px;" id="pdesc" name="pdesc"></textarea> -->
								<textarea id="edit_pet" name="petcontent" style="width:100%;height:250px;border: 0 none;"></textarea>
            								<textarea rows="" cols="" name="pdesc" id="pdesc" style="width:350px;height:250px;display: none"></textarea>
							</div>
						</div>
					
					
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
						<button type="button" class="btn btn-primary" onclick="update()">
					提交更改
				</button>
				
				</form>
				
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
		</div>
    <!-- /#wrapper -->
<!-- Nav CSS -->
<link href="${pageContext.request.contextPath }/css/custom.css" rel="stylesheet">
<!-- Metis Menu Plugin JavaScript -->
<script src="${pageContext.request.contextPath }/js/metisMenu.min.js"></script>
<script src="${pageContext.request.contextPath }/js/custom.js"></script>
<script type="text/javascript">
/* 编辑页面的信息回显*/
		function seslectPet(id) {
			
			$.post(
			"<%=basePath%>adminpet/selectPet.html",
			{"id":id},
			function (data) {
				KindEditor.html('#edit_pet',data.pdesc);
				$("#id").val(data.id);
				$("#pname").val(data.pname);
				$("#pimage").attr('src',data.pimage);
				$("#piccc").val(data.pimage);
				$("#pkind").val(data.pkind);
				$("#psex").val(data.psex);
				$("#page").val(data.page);
				$("#pweight").val(data.pweight);
				$("#num1").html(data.id);
				$("#pstatus").val(data.pstatus);
				
			},
			"json"
			);
		}
		
		/* 图片上传 */
		function imgfunn(){
		var obj = {
				url:"<%=basePath%>admin/uploadPetPic.html",
				dataType:"json",
				type:"post",
				success: function (result) {
					var objs;
					/* if((typeof result == 'object') && result.constructor == Object){
						objs = result;
					}else{
						objs = eval("("+result+")");
					} */
					$("#pimage").attr("width","220px");
					$("#pimage").attr("height","260px");
					$("#pimage").attr("src",result);
					$("#piccc").val(result);
					/* $("#pimage1").removeClass("hidden"); */
				}
		};
		$("#fomm").ajaxSubmit(obj);
	}
		
		/* 修改动物信息 */
		function update() {
			$("#pdesc").val($("#edit_pet").val());//信息同步
			
			$.post(
			"<%=basePath%>adminpet/updatePet.html",
			$("#fomm").serialize(),
			function (data) {
				alert("修改成功!");
				location.href="<%=basePath%>admin/pet.html";
			}
			);
		}
		/* 删除动物信息 */
		function deletePet(id) {
			var y = confirm("您确定要删除吗?");
			if(y){
				$.post(
						"<%=basePath%>adminPet/deletepet.html",
						{"id":id},
						function (data) {
							alert("删除成功!");
							location.href="<%=basePath%>admin/pet.html";
						}
						);
						
			}
		}
</script>
</body>
</html>